<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{name}}</p>
        <input type="text" v-model="name">
        <hr>

        <p>{{user.age}}</p>
        <input type="text" v-model="user.age">
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            name:'tom',
            user:{
                id:1001,
                name:'alice',
                age:18
            }
        },
        watch:{ // 方式1：在Vue实例内容通过watch选项
            name:function(newValue,oldValue){
                console.log(`name被修改，原值：${oldValue}，新值：${newValue}`);
            },
            /* user:{
                handler:function(newValue,oldValue){
                    console.log('user被修改',oldValue,newValue); // 由于对象类型引用的是同一个地址，所以Vue不会保留之前的值
                },
                deep:true, // 深度监听，当对象中的属性发生变化时也会监视、
                immediate:true // 立即触发
            } */
           /*  'user.age':function(newValue,oldValue){ // 只监视对象的某个属性，需要用引号引起来
                console.log('use.age被修改',oldValue,newValue);
            } */
        }
    });

    // 方式2：通过Vue实例的$watch()方法
    var unwatch=vm.$watch('user',function(newValue,oldValue){ // 返回一个取消观察函数
        console.log('user被修改',oldValue,newValue);

        if(newValue.age>30){
            console.log('取消对user的监视');
            unwatch(); // 调用函数，取消监视
        }
    },{
        deep:true,
        immediate:true
    });
</script>
</html>